<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1. 认识TypeScript | 92-YYDS</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/rz_doc_92/favicon.ico">
    <link rel="apple-touch-icon" href="/rz_doc_92/apple-touch-icon.png">
    <meta name="description" content="">
    <meta name="referrer" content="no-referrer">
    
    <link rel="preload" href="/rz_doc_92/assets/css/0.styles.eb696f23.css" as="style"><link rel="preload" href="/rz_doc_92/assets/js/app.c37b6607.js" as="script"><link rel="preload" href="/rz_doc_92/assets/js/3.fe9c6282.js" as="script"><link rel="preload" href="/rz_doc_92/assets/js/2.c35adb5c.js" as="script"><link rel="prefetch" href="/rz_doc_92/assets/js/10.a815e7f8.js"><link rel="prefetch" href="/rz_doc_92/assets/js/11.5cf73907.js"><link rel="prefetch" href="/rz_doc_92/assets/js/12.8364f023.js"><link rel="prefetch" href="/rz_doc_92/assets/js/13.189305ad.js"><link rel="prefetch" href="/rz_doc_92/assets/js/14.28e18334.js"><link rel="prefetch" href="/rz_doc_92/assets/js/15.bc379ff7.js"><link rel="prefetch" href="/rz_doc_92/assets/js/16.63adadba.js"><link rel="prefetch" href="/rz_doc_92/assets/js/17.28e8fcdb.js"><link rel="prefetch" href="/rz_doc_92/assets/js/18.917dcdd1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/19.e231595a.js"><link rel="prefetch" href="/rz_doc_92/assets/js/20.d1e0017d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/21.4f9461ca.js"><link rel="prefetch" href="/rz_doc_92/assets/js/22.8bd2376c.js"><link rel="prefetch" href="/rz_doc_92/assets/js/23.535f0a8f.js"><link rel="prefetch" href="/rz_doc_92/assets/js/24.c596c341.js"><link rel="prefetch" href="/rz_doc_92/assets/js/25.b3cb2221.js"><link rel="prefetch" href="/rz_doc_92/assets/js/26.fac4fec9.js"><link rel="prefetch" href="/rz_doc_92/assets/js/27.77d2df1d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/28.51cbe5c1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/29.0193e27d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/30.b6174252.js"><link rel="prefetch" href="/rz_doc_92/assets/js/31.985027ac.js"><link rel="prefetch" href="/rz_doc_92/assets/js/32.3dd61489.js"><link rel="prefetch" href="/rz_doc_92/assets/js/33.45abb40d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/34.91103b73.js"><link rel="prefetch" href="/rz_doc_92/assets/js/35.2a882fa8.js"><link rel="prefetch" href="/rz_doc_92/assets/js/36.3b80d6cf.js"><link rel="prefetch" href="/rz_doc_92/assets/js/37.11f329d1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/38.974df1fd.js"><link rel="prefetch" href="/rz_doc_92/assets/js/39.7cc0e285.js"><link rel="prefetch" href="/rz_doc_92/assets/js/4.219d9d15.js"><link rel="prefetch" href="/rz_doc_92/assets/js/40.a928365a.js"><link rel="prefetch" href="/rz_doc_92/assets/js/41.6be66339.js"><link rel="prefetch" href="/rz_doc_92/assets/js/42.31ef2deb.js"><link rel="prefetch" href="/rz_doc_92/assets/js/43.9b423721.js"><link rel="prefetch" href="/rz_doc_92/assets/js/44.f020f7e9.js"><link rel="prefetch" href="/rz_doc_92/assets/js/45.79487c7e.js"><link rel="prefetch" href="/rz_doc_92/assets/js/5.b9d7eb6d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/6.af284094.js"><link rel="prefetch" href="/rz_doc_92/assets/js/7.2449c640.js"><link rel="prefetch" href="/rz_doc_92/assets/js/8.e6bfdace.js"><link rel="prefetch" href="/rz_doc_92/assets/js/9.4f10b15a.js">
    <link rel="stylesheet" href="/rz_doc_92/assets/css/0.styles.eb696f23.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/rz_doc_92/" class="home-link router-link-active"><img src="/rz_doc_92/doraameng.jpg" alt="92-YYDS" class="logo"> <span class="site-name can-hide">92-YYDS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/rz_doc_92/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/rz_doc_92/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/rz_doc_92/xcx/" class="nav-link">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_92" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="/rz_doc_92/interview/" class="nav-link">
  必会面试题
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/rz_doc_92/vue/" class="nav-link">
  vue基础
</a></div><div class="nav-item"><a href="/rz_doc_92/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/rz_doc_92/xcx/" class="nav-link">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_92" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="/rz_doc_92/interview/" class="nav-link">
  必会面试题
</a></div> <!----></nav>  <!----> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-认识typescript"><a href="#_1-认识typescript" class="header-anchor">#</a> 1. 认识TypeScript</h2> <h3 id="_1-什么是ts"><a href="#_1-什么是ts" class="header-anchor">#</a> 1. 什么是TS</h3> <p>TypeScript 是具有类型语法的 JavaScript，是一门强类型的编程语言
<img src="/rz_doc_92/assets/img/100(1).1d0ddd10.png" alt="image.png"></p> <ul><li><p><code>TypeScript</code> 简称：TS，是 JavaScript 的超集，简单来说就是：JS 有的 TS 都有</p> <p><img src="/rz_doc_92/assets/img/1007.8ae17835.png" alt="TS是JS的超集"></p></li> <li><p>TypeScript = <code>Type</code> + JavaScript（在 JS 基础之上，<strong>为 JS 添加了类型支持</strong>）</p></li> <li><p>TypeScript 是<em>微软</em>开发的开源编程语言，可以在任何运行 JavaScript 的地方运行</p></li></ul> <p><strong>常用网站</strong></p> <blockquote><p>工作里面练习方式 -- playground  ---  平常开发的时候，如果要测试一些框架新的功能，一般会采用线上的playground环境， 不会本地搭建环境，比较慢</p> <p>https://www.typescriptlang.org/zh/play</p> <p>https://playcode.io/vue</p> <p>https://bootstrap-vue.org/play</p></blockquote> <ul><li><a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">TS 官方文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.tslang.cn/" target="_blank" rel="noopener noreferrer">TS 中文参考 - 不再维护<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>自学网站： （https://ts.xcatliu.com/， http://www.patrickzhong.com/TypeScript/PREFACE.html）</li></ul> <h3 id="_2-带来的好处"><a href="#_2-带来的好处" class="header-anchor">#</a> 2. 带来的好处</h3> <p>1- 静态类型检查，提前发现代码错误</p> <p><img src="/rz_doc_92/assets/img/100(2).c6280212.png" alt="image.png"> <img src="/rz_doc_92/assets/img/100(3).b795c100.png" alt="image.png">
2- 良好的代码提示，提升开发效率</p> <p><img src="/rz_doc_92/assets/img/100(4).90225225.png" alt="image.png"></p> <p><strong>使用对比：</strong></p> <ul><li>使用 JS：
<ol><li>在 VSCode 里面写代码</li> <li>在浏览器中运行代码 --&gt; 运行时，才会发现错误【晚】</li></ol></li> <li>使用 TS：
<ol><li>在 VSCode 里面写代码 --&gt; 写代码的同时，就会发现错误【早】</li> <li>在浏览器中运行代码</li></ol></li></ul> <h3 id="_3-什么时候用"><a href="#_3-什么时候用" class="header-anchor">#</a> 3. 什么时候用</h3> <p>以下是来自社区的一些建议：</p> <ol><li>你做的是一个大型的应用吗？</li> <li>是否是团队协作开发模式？</li> <li>是否在编写通用的代码库？（Vue3 / ElementPlus...）</li></ol> <p>结论：TypeScript不是万能的，技术的选型不能脱离具体的业务和应用场景，TS更加适合用来开发中大型的项目，或者是通用的JS代码库，再或者是团队协作开发的场景</p> <p><strong>目前，前端最新的开发技术栈：</strong></p> <ol><li>React： **TS + Hooks **（facebook  instgram）</li> <li>Vue： <strong>TS + Vue3</strong>  （个人，线下组织）</li> <li>Angular： 全部框架都是ts写的，完全支持 （谷歌）</li></ol> <ul><li>注意： Vue2 对 TS 的支持不好~</li></ul> <h2 id="_2-搭建ts编译环境"><a href="#_2-搭建ts编译环境" class="header-anchor">#</a> 2. 搭建TS编译环境</h2> <h3 id="_1-为什么需要编译环境"><a href="#_1-为什么需要编译环境" class="header-anchor">#</a> 1. 为什么需要编译环境</h3> <p>TypeScript编写的代码是无法直接在js引擎（浏览器/NodeJs）中运行的，最终还需要经过编译变成js代码才可以正常运行
<img src="/rz_doc_92/assets/img/100(5).84ef3029.png" alt="image.png"></p> <p>带来的好处：既可以再开发时使用TS编写代码享受类型带来的好处，同时保证实际运行的还是JS代码</p> <h3 id="_2-搭建手动编译环境"><a href="#_2-搭建手动编译环境" class="header-anchor">#</a> 2. 搭建手动编译环境</h3> <ol><li>全局安装 typescript 包（编译引擎）-&gt; 注册 tsc 命令
npm install -g typescript</li> <li>新增 hello.ts 文件，  执行 tsc hello.ts 命令生成hello.js文件</li> <li>执行 node hello.js 运行js文件查看效果</li></ol> <h3 id="_3-搭建工程化下的自动编译环境"><a href="#_3-搭建工程化下的自动编译环境" class="header-anchor">#</a> 3. 搭建工程化下的自动编译环境</h3> <p>基于工程化的TS开发模式（webpack / vite），TS的编译环境已经内置了，无需手动安装配置，通过以下命令即可创建一个最基础的自动化的TS编译环境</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> create vite@latest   ts-pro  -- <span class="token parameter variable">--template</span> vanilla-ts
</code></pre></div><p>命令说明：</p> <ol><li>npm create vite<a href="/latest">@latest </a>   使用最新版本的vite创建项目</li> <li>ts-pro   项目名称</li> <li>-- --template vanilla-ts     创建项目使用的模板为原生ts模板</li></ol> <h2 id="_3-类型注解"><a href="#_3-类型注解" class="header-anchor">#</a> 3. 类型注解</h2> <h3 id="_1-ts类型注解是什么"><a href="#_1-ts类型注解是什么" class="header-anchor">#</a> 1. TS类型注解是什么</h3> <p>概念：类型注解指的是给变量添加类型约束，使变量只能被赋值为约定好的类型, 同时可以有相关的类型提示</p> <p><img src="/rz_doc_92/assets/img/100(6).21844bbd.png" alt="image.png"></p> <p>说明：:string 就是类型注解， 约束变量 message 只能被赋值为string 类型, 同时可以有string类型的相关提示</p> <h3 id="_2-ts支持的常用类型注解"><a href="#_2-ts支持的常用类型注解" class="header-anchor">#</a> 2. TS支持的常用类型注解</h3> <p><strong>JS已有类型</strong></p> <ol><li>简单类型
number  string  boolean  null  undefined</li> <li>复杂类型
数组   函数
<strong>TS新增类型</strong>
联合类型、类型别名、接口（interface）、字面量类型、泛型、枚举、void、any等</li></ol> <h3 id="_3-简单类型如何进行类型注解"><a href="#_3-简单类型如何进行类型注解" class="header-anchor">#</a> 3. 简单类型如何进行类型注解</h3> <p>简单类型的注解完全按照 JS的类型（全小写的格式）来书写即可</p> <p><img src="/rz_doc_92/assets/img/100(7).c5afef70.png" alt="image.png"></p> <h2 id="_4-数组类型注解"><a href="#_4-数组类型注解" class="header-anchor">#</a> 4. 数组类型注解</h2> <h3 id="_1-有什么用"><a href="#_1-有什么用" class="header-anchor">#</a> 1. 有什么用</h3> <p>变量被注解为数组类型之后，有俩点好处：
1- 不仅可以限制变量类型为数组而且可以限制数组成员的类型
<img src="/rz_doc_92/assets/img/100(8).f050bcfa.png" alt="image.png"></p> <p>2- 编码时不仅可以提示数组的属性和方法而且可以提示成员的属性和方法
<img src="/rz_doc_92/assets/img/100(9).c4763c0a.png" alt="image.png"></p> <h3 id="_2-如何注解数组类型"><a href="#_2-如何注解数组类型" class="header-anchor">#</a> 2. 如何注解数组类型</h3> <p>使用数据类型对变量进行类型注解有俩种语法</p> <p><img src="/rz_doc_92/assets/img/100(10).fb9f2454.png" alt="image.png"></p> <h3 id="_3-思考题"><a href="#_3-思考题" class="header-anchor">#</a> 3. 思考题</h3> <p>有一个变量arr, 要求用俩种方式添加类型注解，使其只能赋值一个成员都是字符串的数组?</p> <h2 id="_5-联合类型和别名类型"><a href="#_5-联合类型和别名类型" class="header-anchor">#</a> 5. 联合类型和别名类型</h2> <h3 id="_1-联合类型"><a href="#_1-联合类型" class="header-anchor">#</a> 1. 联合类型</h3> <p>概念：将多个类型合并为一个类型对变量进行注解
需求：如何注解数组类型可以让数组中既可以存放string类型的成员也可以存放number类型的成员？
<img src="/rz_doc_92/assets/img/100(11).b6c13f61.png" alt="image.png">
说明：string | number 表示arr3中的成员既可以是string类型也可以是number类型</p> <h3 id="_2-类型别名"><a href="#_2-类型别名" class="header-anchor">#</a> 2. 类型别名</h3> <p>概念：通过 type关键词 给写起来较复杂的类型起一个其它的名字，用来简化和复用类型
<img src="/rz_doc_92/assets/img/100(12).afa2eb3d.png" alt="image.png"></p> <p>说明：type 类型别名 = 具体类型  其中类型别名的命名采用规范的大驼峰格式</p> <h3 id="_3-思考题-2"><a href="#_3-思考题-2" class="header-anchor">#</a> 3. 思考题</h3> <p>有一个变量foo,要求添加类型注解，使其既可以赋值为number类型，也可以赋值为成员都是字符串的数组?</p> <h2 id="_6-函数类型"><a href="#_6-函数类型" class="header-anchor">#</a> 6. 函数类型</h2> <h3 id="_1-基础使用"><a href="#_1-基础使用" class="header-anchor">#</a> 1. 基础使用</h3> <p>概念：函数类型是指给函数添加类型注解，本质上就是给函数的参数和返回值添加类型约束</p> <p><img src="/rz_doc_92/assets/img/100(13).ad9a154c.png" alt="image.png"></p> <p>说明：</p> <ol><li>函数参数注解类型之后不但限制了参数的类型还限制了参数为必填</li> <li>函数返回值注解类型之后限制了该函数内部return出去的值必须满足类型要求</li></ol> <p>好处：</p> <ol><li>避免因为参数不对导致的函数内部逻辑错误     2.  对函数起到说明的作用</li></ol> <h3 id="_2-函数表达式"><a href="#_2-函数表达式" class="header-anchor">#</a> 2. 函数表达式</h3> <p>函数表达式的类型注解有俩种方式，参数和返回值分开注解和函数整体注解</p> <p>1- 参数和返回值分开注解</p> <p><img src="/rz_doc_92/assets/img/100(14).755a072e.png" alt="image.png"></p> <p>2-函数整体注解（只针对于函数表达式）</p> <p><img src="/rz_doc_92/assets/img/100(15).92c0cbdb.png" alt="image.png"></p> <h3 id="_3-可选参数"><a href="#_3-可选参数" class="header-anchor">#</a> 3. 可选参数</h3> <p>概念：可选参数表示当前参数可传可不传，一旦传递实参必须保证参数类型正确</p> <p><img src="/rz_doc_92/assets/img/100(16).a5c4dd81.png" alt="image.png">
说明：lastName参数表示可选参数，可传可不传，一旦传递实参必须保证类型为string类型</p> <h3 id="_4-无返回值-void"><a href="#_4-无返回值-void" class="header-anchor">#</a> 4. 无返回值 - void</h3> <p>概念：JS中的有些函数只有功能没有返回值，此时使用void进行返回值注解，明确表示函数没有函数值</p> <p><img src="/rz_doc_92/assets/img/100(17).25820192.png" alt="image.png"></p> <p>注意事项：在JS中如何没有返回值，默认返回的是undefined, 在TS中 void和undefined不是一回事，undefined在TS中是一种明确的简单类型，如果指定返回值为undefined，那返回值必须是undefined类型</p> <h3 id="_5-思考题"><a href="#_5-思考题" class="header-anchor">#</a> 5. 思考题</h3> <p>编写一个arr2Str函数，作用为把数组转换为字符串，其中数组中既可以包含字符串和数字，分隔符也可以进行自定义，类型为字符串类型，使用样例：</p> <ol><li>arr2Str( [1, 2, 3] ,  '-' )    -&gt;   '1-2-3'</li> <li>arr2Str( [‘4’, ’5’] , ’&amp;’ )  -&gt; '4&amp;5'</li></ol> <h2 id="_7-interface接口"><a href="#_7-interface接口" class="header-anchor">#</a> 7. interface接口</h2> <h3 id="_1-接口类型的作用"><a href="#_1-接口类型的作用" class="header-anchor">#</a> 1. 接口类型的作用</h3> <p>作用: 在TS中使用interface接口来描述对象数据的类型（常用于给对象的属性和方法添加类型约束）</p> <img src="/rz_doc_92/assets/img/100(18).205731cb.png" alt="image.png" style="zoom:50%;">
说明：一旦注解接口类型之后对象的属性和方法类型都需要满足要求，属性不能多也不能少
<h3 id="_2-典型场景"><a href="#_2-典型场景" class="header-anchor">#</a> 2. 典型场景</h3> <p>场景：在常规业务开发中比较典型的就是前后端数据通信的场景</p> <ol><li>前端向后端发送数据：收集表单对象数据时的类型校验</li> <li>前端使用后端数据：渲染后端对象数组列表时的智能提示</li></ol> <p><img src="/rz_doc_92/assets/img/100(19).943b442d.png" alt="image.png"></p> <h3 id="_3-接口的可选设置"><a href="#_3-接口的可选设置" class="header-anchor">#</a> 3. 接口的可选设置</h3> <p>概念: 通过？对属性进行可选标注，赋值的时候该属性可以缺失，如果有值必须保证类型满足要求
<img src="/rz_doc_92/assets/img/100(20).de003f18.png" alt="image.png"></p> <h3 id="_4-接口的继承"><a href="#_4-接口的继承" class="header-anchor">#</a> 4. 接口的继承</h3> <p>概念：接口的很多属性是可以进行类型复用的，使用 extends 实现接口继承,实现类型复用
<img src="/rz_doc_92/assets/img/100(21).61b2f7f2.png" alt="image.png"></p> <h3 id="_5-思考题-2"><a href="#_5-思考题-2" class="header-anchor">#</a> 5. 思考题</h3> <p>通常我们的后端接口返回的数据格式具有一定的规范，比如经常见到的response对象，如下，尝试使用interface接口定义其类型</p> <img src="/rz_doc_92/assets/img/100(22).b6d7603c.png" alt="image.png" style="zoom:50%;"> <h2 id="_8-type注解对象类型"><a href="#_8-type注解对象类型" class="header-anchor">#</a> 8. type注解对象类型</h2> <h3 id="_1-注解对象"><a href="#_1-注解对象" class="header-anchor">#</a> 1. 注解对象</h3> <p>概念：在TS中对于对象数据的类型注解，除了使用interface之外还可以使用类型别名来进行注解，作用相似</p> <img src="/rz_doc_92/assets/img/100(23).01cc1c36.png" alt="image.png" style="zoom:50%;"> <h3 id="_2-type-交叉类型模拟继承"><a href="#_2-type-交叉类型模拟继承" class="header-anchor">#</a> 2. type + 交叉类型模拟继承</h3> <p>类型别名配合交叉类型（&amp;）可以模拟继承，同样可以实现类型复用</p> <p><img src="/rz_doc_92/assets/img/100(24).5956dce0.png" alt="image.png"></p> <h3 id="_3-interface-对比-type"><a href="#_3-interface-对比-type" class="header-anchor">#</a> 3. interface 对比 type</h3> <ol><li>type可以定义单个变量类型、联合类型、对象，interface只能定义对象</li> <li>type不可以重复声明，interface可以重复声明(声明合并);</li></ol> <p>在注解对象类型的场景下非常相似，推荐大家一律使用type, type更加灵活</p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">type</span> <span class="token class-name">Iprops</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span>
    age<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>
<span class="token keyword">type</span> <span class="token class-name">Iprops</span><span class="token operator">:</span><span class="token builtin">string</span> <span class="token operator">=</span> <span class="token string">&quot;111&quot;</span>

<span class="token keyword">interface</span> <span class="token class-name">MyInterface</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span>
    age<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">MyInterface</span> <span class="token punctuation">{</span>
	gender<span class="token operator">:</span> <span class="token builtin">string</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> obj<span class="token operator">:</span> MyInterface<span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">&quot;string&quot;</span>
    age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
    gender<span class="token operator">:</span> <span class="token string">&quot;男&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token comment">// 重复声明相当于把两个类型加一块</span>
</code></pre></div><h3 id="_4-思考题"><a href="#_4-思考题" class="header-anchor">#</a> 4. 思考题</h3> <p>还是我们熟悉的response对象，如下，尝试使用type定义其类型</p> <img src="/rz_doc_92/assets/img/100(25).b6d7603c.png" alt="image.png" style="zoom:50%;"> <h2 id="_9-字面量类型"><a href="#_9-字面量类型" class="header-anchor">#</a> 9. 字面量类型</h2> <h3 id="_1-什么是字面量类型"><a href="#_1-什么是字面量类型" class="header-anchor">#</a> 1. 什么是字面量类型</h3> <p>概念：使用 js字面量 作为类型对变量进行类型注解，这种类型就是字面量类型, 字面量类型比普通的类型更加精确</p> <p><img src="/rz_doc_92/assets/img/100(26).9066472c.png" alt="image.png"></p> <p>说明：除了上面的数字字面量，js里常用的字符串字面量，数组字面量，对象字面量等都可以当成类型使用</p> <h3 id="_2-字面量类型的实际应用"><a href="#_2-字面量类型的实际应用" class="header-anchor">#</a> 2. 字面量类型的实际应用</h3> <p>字面量类型在实际应用中通常和联合类型结合起来使用，提供一个精确的可选范围
场景1：性别只能是 ’男‘ 和 ’女‘，就可以采用联合类型配合字面量的类型定义方案
<img src="/rz_doc_92/assets/img/100(27).ffef5600.png" alt="image.png"></p> <p>场景2：ElementUI中的el-button组件按钮的type属性
<img src="/rz_doc_92/assets/img/100(28).5a1c0d78.png" alt="image.png"></p> <h3 id="_3-字面量类型与const"><a href="#_3-字面量类型与const" class="header-anchor">#</a> 3. 字面量类型与const</h3> <p>思考一下下面的 str1 和 str2，TS推断出来的类型分别是什么？
<img src="/rz_doc_92/assets/img/100(29).6475dd55.png" alt="image.png">
说明：const声明的变量称之为常量，常量是不可以进行重新赋值的，所以str2推断出来的是字面量类型而不是string类型</p> <h3 id="_4-思考题-2"><a href="#_4-思考题-2" class="header-anchor">#</a> 4. 思考题</h3> <p>还是我们熟悉的后端返回数据，这一次业务code码有多种情况1001、 1002、 1003，尝试改写类型满足要求
<img src="/rz_doc_92/assets/img/100(30).f7014d1f.png" alt="image.png"></p> <h2 id="_10-类型推论和any类型"><a href="#_10-类型推论和any类型" class="header-anchor">#</a> 10. 类型推论和any类型</h2> <h3 id="_1-类型推论"><a href="#_1-类型推论" class="header-anchor">#</a> 1. 类型推论</h3> <p>概念：在 TS 中存在类型推断机制，在没有给变量添加类型注解的情况下，TS 也会给变量提供类型，以下是发生类型推断的几个场景</p> <ul><li>声明变量并赋值时</li></ul> <p><img src="/rz_doc_92/assets/img/100(31).b014889e.png" alt="image.png"></p> <ul><li>决定函数返回值时</li></ul> <p><img src="/rz_doc_92/assets/img/100(32).1f10d833.png" alt="image.png"></p> <p>一些小建议</p> <ol><li>开发项目的时候，能省略类型注解的地方就省略</li> <li>刚开始学TS，建议对所有类型都加上，先熟悉</li> <li>鼠标放至变量上，VsCode 自动提示类型</li></ol> <h3 id="_2-any类型"><a href="#_2-any类型" class="header-anchor">#</a> 2. any类型</h3> <p>作用：变量被注解为any类型之后，TS会忽略类型检查，错误的类型赋值不会报错，也不会有任何提示</p> <p><img src="/rz_doc_92/assets/img/100(33).5a01c547.png" alt="image.png"></p> <p>注意：any 的使用越多，程序可能出现的漏洞越多，因此不推荐使用 any 类型，尽量避免使用</p> <h3 id="_3-类型断言"><a href="#_3-类型断言" class="header-anchor">#</a> 3. 类型断言</h3> <p>作用：有些时候开发者比TS本身更清楚当前的类型是什么，可以使用断言（as）让类型更加精确和具体
需求：获取页面中的id为link的a元素，尝试通过点语法访问href属性</p> <p><img src="/rz_doc_92/assets/img/100(34).3d6a7d62.png" alt="image.png"></p> <p><img src="/rz_doc_92/assets/img/100(35).a89cf0c8.png" alt="image.png"></p> <h3 id="_4-类型断言的注意事项"><a href="#_4-类型断言的注意事项" class="header-anchor">#</a> 4. 类型断言的注意事项</h3> <p>类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，滥用类型断言可能会导致运行时错误</p> <p><img src="/rz_doc_92/assets/img/100(36).4e9202a3.png" alt="image.png"></p> <p>说明：利用断言把foo变量的类型指定为精确的number，但是传参的时候还是可以传递number类型或者string类型均满足类型要求，但是传递string会导致运行时错误</p> <h2 id="_11-泛型"><a href="#_11-泛型" class="header-anchor">#</a> 11. 泛型</h2> <h3 id="_1-泛型-基本介绍"><a href="#_1-泛型-基本介绍" class="header-anchor">#</a> 1.泛型-基本介绍</h3> <ul><li>泛型（Generics）是指在定义接口、函数等类型的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性, 使用泛型可以复用类型并且让类型更加灵活</li> <li>泛型就是<strong>解决 类 接口 方法的复用性</strong>、以及对不特定数据类型的支持(类型校验)</li></ul> <h3 id="_2-泛型函数"><a href="#_2-泛型函数" class="header-anchor">#</a> 2. 泛型函数</h3> <p>语法：在函数名称的后面使用<code>&lt;T&gt;</code>即可声明一个泛型参数，整个函数中（参数、返回值、函数体）的变量都可以使用该参数的类型</p> <p>思考函数的类型不一样，怎么去定义函数的类型</p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token comment">// 传入什么类型就返回什么类型</span>
<span class="token keyword">function</span> <span class="token function">a</span><span class="token punctuation">(</span>val<span class="token operator">:</span><span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token builtin">string</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> val
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">b</span><span class="token punctuation">(</span>val<span class="token operator">:</span><span class="token builtin">number</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token builtin">number</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> val
<span class="token punctuation">}</span>

<span class="token comment">// 要是工作里面忘记了，可以使用any 可以解决这个问题，但放弃了类型检查，传入返回导致不一致</span>
<span class="token keyword">function</span> <span class="token function">a</span><span class="token punctuation">(</span>val<span class="token operator">:</span><span class="token builtin">any</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token builtin">any</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> val
<span class="token punctuation">}</span>
</code></pre></div><p><strong>2.1  引入泛型变量，来复用函数类型</strong></p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token comment">// &lt;T&gt; 表示泛型，调用这个方法时来决定类型</span>
<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">fn</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>val<span class="token operator">:</span><span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token constant">T</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> val
<span class="token punctuation">}</span>
<span class="token generic-function"><span class="token function">fn</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token string">'val'</span><span class="token punctuation">)</span> <span class="token comment">// ok</span>
<span class="token generic-function"><span class="token function">fn</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token builtin">number</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span> <span class="token comment">// ok</span>
<span class="token generic-function"><span class="token function">fn</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span> <span class="token comment">// 错误</span>
</code></pre></div><p><strong>2.2 思考，一个函数接受两个参数，两个参数类型相同，返回该类型的元素组成的数组？参数类型任意</strong></p> <div class="language- extra-class"><pre class="language-text"><code>function getData&lt;T&gt;(x:T,y:T):T[]{
  let arr : T[] = [x,y]
  return arr
}

getData&lt;string&gt;('a','b')
getData&lt;number&gt;(1,2)
</code></pre></div><p><strong>2.3 思考题：一个函数接受两个参数，两个参数类型不同，返回的数组是这两个元素数组的数组，参数类型任意</strong></p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">duble</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">K</span><span class="token punctuation">,</span><span class="token constant">V</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>val1<span class="token operator">:</span><span class="token constant">K</span><span class="token punctuation">,</span>val2<span class="token operator">:</span><span class="token constant">V</span><span class="token punctuation">)</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token constant">K</span><span class="token punctuation">,</span><span class="token constant">V</span><span class="token punctuation">]</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span>val1<span class="token punctuation">,</span>val2<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><img src="/rz_doc_92/assets/img/100(42).23f521ae.png" alt="image.png" style="zoom:50%;"> <p>需求：设置一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值(多种类型)
<img src="/rz_doc_92/assets/img/100(43).a512c359.png" alt="image.png"></p> <h3 id="_2-泛型接口"><a href="#_2-泛型接口" class="header-anchor">#</a> 2. 泛型接口</h3> <p>思考：下面的俩种数据结构如何使用interface接口实现类型注解？这样做有何问题？
<img src="/rz_doc_92/assets/img/100(37).bd7a5df7.png" alt="image.png"></p> <p>语法：在接口类型的名称后面使用<code>&lt;T&gt;</code>即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型</p> <p><img src="/rz_doc_92/assets/img/100(38).339a32a5.png" alt="image.png"></p> <p>通用思路：</p> <ol><li>找到可变的类型部分通过泛型抽象为泛型参数（定义参数）</li> <li>在使用泛型的时候，把具体类型传入到泛型参数位置 （传参）</li></ol> <p><img src="/rz_doc_92/assets/img/100(39).0e105ca3.png" alt="image.png"></p> <h3 id="_3-泛型别名"><a href="#_3-泛型别名" class="header-anchor">#</a> 3. 泛型别名</h3> <p>语法：在类型别名type的后面使用<code>&lt;T&gt;</code>即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型</p> <img src="/rz_doc_92/assets/img/100(40).604e2eca.png" alt="image.png" style="zoom:50%;"> <p>需求：使用泛型别名重构ResData案例
<img src="/rz_doc_92/assets/img/100(41).b06a4fd5.png" alt="image.png"></p> <h3 id="_5-泛型约束"><a href="#_5-泛型约束" class="header-anchor">#</a> 5. 泛型约束</h3> <p>作用：泛型的特点就是灵活不确定，有些时候泛型函数的内部需要访问一些特定类型的数据才有的属性，此时会有类型错误，需要通过泛型约束解决</p> <p><img src="/rz_doc_92/assets/img/100(44).ecd64c3f.png" alt="image.png"></p> <p>添加约束</p> <p><img src="/rz_doc_92/assets/img/100(45).5fa47c44.png" alt="image.png"></p> <h2 id="_12-高级ts知识点-关键字-了解-面试题"><a href="#_12-高级ts知识点-关键字-了解-面试题" class="header-anchor">#</a> 12. 高级TS知识点 --- 关键字 --- 了解（面试题）</h2> <h5 id="_1-keyof"><a href="#_1-keyof" class="header-anchor">#</a> 1. keyof</h5> <p><strong>keyof 用于获取某种类型的所有键(类似于Object.keys())，其返回类型是联合类型</strong></p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">interface</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  age<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  location<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 下面代码类似于  type K1 = // &quot;name&quot; | &quot;age&quot; | &quot;location&quot;</span>
<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">K1</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> Person  <span class="token comment">// // &quot;name&quot; | &quot;age&quot; | &quot;location&quot;</span>
<span class="token keyword">const</span> key<span class="token operator">:</span> <span class="token constant">K1</span> <span class="token operator">=</span> <span class="token string">'name'</span>

<span class="token comment">// 看做有点鸡肋，不过核心是搭配其他关键词使用</span>
</code></pre></div><h5 id="_2-keyof-extends"><a href="#_2-keyof-extends" class="header-anchor">#</a> 2. keyof + extends</h5> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token comment">// 1. 一个函数，根据对象不同key返回不同的value值，</span>
<span class="token keyword">function</span> <span class="token function">prop1</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 如果函数这样写的话，在ts里面不能通过，因为没有定义obj和key的类型</span>
<span class="token comment">// 先这样改动</span>
<span class="token keyword">function</span> <span class="token function">prop2</span><span class="token punctuation">(</span>obj<span class="token operator">:</span> object<span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 上面代码报红色错误，元素隐式地拥有 any 类型，因为 string 类型不能被用于索引 {} 类型。要解决这个问题，你可以使用以下非常暴力的方案</span>
<span class="token keyword">function</span> <span class="token function">prop3</span><span class="token punctuation">(</span>obj<span class="token operator">:</span> object<span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>obj <span class="token keyword">as</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 虽然不报错了，但是也失去了ts的作用，和js没有任何区别，但是在工作里面，要是搞不定某个类型，就用any，快速完成领导需求也可以，后面再慢慢完善。我们这里给大家推荐一个好办法</span>
<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">prop4</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> object<span class="token punctuation">,</span> <span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> <span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>obj<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 解释：首先定义了 T 类型并使用 extends 关键字约束该类型必须是 object 类型的子类型，然后使用 keyof 操作符获取 T 类型的所有键，其返回类型是联合类型，最后利用 extends 关键字约束 K 类型必须为 keyof T 联合类型的子类型</span>

<span class="token comment">// 测试代码</span>
<span class="token keyword">type</span> <span class="token class-name">Todo</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  id<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  text<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  done<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> todo<span class="token operator">:</span> Todo <span class="token operator">=</span> <span class="token punctuation">{</span>
  id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  text<span class="token operator">:</span> <span class="token string">&quot;Learn TypeScript keyof&quot;</span><span class="token punctuation">,</span>
  done<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token generic-function"><span class="token function">prop5</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span> <span class="token keyword">extends</span> object<span class="token punctuation">,</span> <span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token keyword">keyof</span> <span class="token constant">T</span><span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span>obj<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">,</span> key<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> obj<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> id <span class="token operator">=</span> <span class="token function">prop5</span><span class="token punctuation">(</span>todo<span class="token punctuation">,</span> <span class="token string">&quot;id&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// const id: number</span>
<span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">prop5</span><span class="token punctuation">(</span>todo<span class="token punctuation">,</span> <span class="token string">&quot;text&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// const text: string</span>
<span class="token keyword">const</span> done <span class="token operator">=</span> <span class="token function">prop5</span><span class="token punctuation">(</span>todo<span class="token punctuation">,</span> <span class="token string">&quot;done&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// const done: boolean</span>

<span class="token comment">// 尝试访问不存在得值， 报红，成功阻止我们尝试读取不存在的属性</span>
<span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token function">prop5</span><span class="token punctuation">(</span>todo<span class="token punctuation">,</span> <span class="token string">&quot;date&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h5 id="_3-in"><a href="#_3-in" class="header-anchor">#</a> 3. in</h5> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token comment">// in 其实就像是遍历一样</span>
<span class="token keyword">type</span> <span class="token class-name">Keys1</span> <span class="token operator">=</span> <span class="token string">&quot;a&quot;</span> <span class="token operator">|</span> <span class="token string">&quot;b&quot;</span>
<span class="token keyword">type</span> <span class="token class-name">Obj1</span> <span class="token operator">=</span>  <span class="token punctuation">{</span>
  <span class="token punctuation">[</span>p <span class="token keyword">in</span> Keys1<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span> 
<span class="token comment">// 等价于 type Obj = { a: any, b: any }</span>
<span class="token keyword">const</span> obj1<span class="token operator">:</span> Obj1 <span class="token operator">=</span> <span class="token punctuation">{</span>
  a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  b<span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">Keys2</span> <span class="token operator">=</span> <span class="token string">'a'</span> <span class="token operator">|</span> <span class="token string">'b'</span> <span class="token operator">|</span> <span class="token string">'c'</span><span class="token punctuation">;</span>
<span class="token keyword">type</span> <span class="token class-name">Obj2</span> <span class="token operator">=</span> <span class="token punctuation">{</span> 
    <span class="token punctuation">[</span> <span class="token constant">T</span> <span class="token keyword">in</span> Keys2<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// in 遍历 Keys，并为每个值赋予 string 类型</span>
 
<span class="token comment">// type Obj = {</span>
<span class="token comment">//     a: string,</span>
<span class="token comment">//     b: string,</span>
<span class="token comment">//     c: string</span>
<span class="token comment">// }</span>
<span class="token keyword">const</span> obj2<span class="token operator">:</span> Obj2 <span class="token operator">=</span> <span class="token punctuation">{</span>
  a<span class="token operator">:</span> <span class="token string">'11'</span><span class="token punctuation">,</span>
  b<span class="token operator">:</span> <span class="token string">'22'</span><span class="token punctuation">,</span>
  c<span class="token operator">:</span> <span class="token string">'33'</span>
<span class="token punctuation">}</span>
<span class="token comment">// keyof 后面跟的是类型， 和in一样都是类型</span>
<span class="token keyword">type</span> <span class="token class-name"><span class="token constant">TT1</span></span> <span class="token operator">=</span> <span class="token keyword">keyof</span> Obj2 <span class="token comment">// 等价于 'a'|'b'|'c'</span>
<span class="token keyword">const</span> a<span class="token operator">:</span> <span class="token constant">TT1</span> <span class="token operator">=</span> <span class="token string">'a'</span> 
</code></pre></div><h5 id="_4-内置类型别名-了解几个即可"><a href="#_4-内置类型别名-了解几个即可" class="header-anchor">#</a> 4. 内置类型别名 -- 了解几个即可</h5> <blockquote><p>https://github.com/SunshowerC/blog/issues/15</p></blockquote> <p><strong>Pick、Readonly、Partial、Required 等</strong></p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token comment">// Pick 从 T 中过滤出属性 K</span>
<span class="token comment">// 源码定义 </span>
<span class="token keyword">type</span> <span class="token class-name">Readonly<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token keyword">readonly</span> <span class="token punctuation">[</span><span class="token constant">P</span> <span class="token keyword">in</span> <span class="token keyword">keyof</span> <span class="token constant">T</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">P</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 使用场景</span>
<span class="token keyword">interface</span> <span class="token class-name">UserInfo</span> <span class="token punctuation">{</span>
  id<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">type</span> <span class="token class-name">NewUserInfo</span> <span class="token operator">=</span> Pick<span class="token operator">&lt;</span>UserInfo<span class="token punctuation">,</span> <span class="token string">'name'</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-typescript extra-class"><pre class="language-typescript"><code>Partial  将类型 <span class="token constant">T</span> 的所有属性标记为可选属性 <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">-</span> Required反面，将所有属性标记为必选属性

<span class="token comment">// 别人的写法</span>
<span class="token keyword">type</span> <span class="token class-name">Partial<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token punctuation">[</span><span class="token constant">P</span> <span class="token keyword">in</span> <span class="token keyword">keyof</span> <span class="token constant">T</span><span class="token punctuation">]</span><span class="token operator">?</span><span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token constant">P</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 账号属性</span>
<span class="token keyword">interface</span> <span class="token class-name">AccountInfo</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token builtin">string</span> 
    email<span class="token operator">:</span> <span class="token builtin">string</span> 
    age<span class="token operator">:</span> <span class="token builtin">number</span> 
    vip<span class="token operator">:</span> <span class="token number">0</span><span class="token operator">|</span><span class="token number">1</span> <span class="token comment">// 1 是vip ，0 是非vip</span>
<span class="token punctuation">}</span>

<span class="token comment">// 当我们需要渲染一个账号表格时，我们需要定义</span>
<span class="token keyword">const</span> accountList<span class="token operator">:</span> AccountInfo<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>

<span class="token comment">// 但当我们需要查询过滤账号信息，需要通过表单，</span>
<span class="token comment">// 但明显我们可能并不一定需要用到所有属性进行搜索，此时可以定义</span>
<span class="token keyword">const</span> model<span class="token operator">:</span> Partial<span class="token operator">&lt;</span>AccountInfo<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
  vip<span class="token operator">:</span> undefind
<span class="token punctuation">}</span>
</code></pre></div><div class="language- extra-class"><pre class="language-text"><code>Pick
这个类型则可以将某个类型中的子属性挑出来，变成包含这个类型部分属性的子类型
源码
type Pick&lt;T, K extends keyof T&gt; = {
    [P in K]: T[P];
};
从源码可以看到 K 必须是 T 的 key，然后用 in 进行遍历, 将值赋给 P, 最后 T[P] 取得相应属性的值

Readonly
这个类型的作用是将传入的属性变为只读选项
// 源码 node_modules/typescript/lib/lib.es5.d.ts

type Readonly&lt;T&gt; = {
    readonly [P in keyof T]: T[P];
};
给子属性添加 readonly 的标识，如果将上面的 readonly 改成 -readonly， 就是移除子属性的 readonly 标识

Partial 的作用就是可以将某个类型里的属性全部变为可选项 ?
//源码 node_modules/typescript/lib/lib.es5.d.ts

type Partial&lt;T&gt; = {
    [P in keyof T]?: T[P];
};
可以看到 keyof T 拿到 T 所有属性名, 然后 in 进行遍历, 将值赋给 P, 最后 T[P] 取得相应属性的值. 结合中间的 ?，将所有属性变为可选
</code></pre></div><h2 id="_13-综合案例"><a href="#_13-综合案例" class="header-anchor">#</a> 13. 综合案例</h2> <p>需求：记录当前页面的刷新次数和刷新时的时间，每次刷新都自动自增一次，并显示到页面中，要求用TypeScript实现</p> <p><img src="/rz_doc_92/assets/img/100(46).bdc486ab.png" alt="image.png">
核心思路</p> <ol><li>从本地获取到当前最新列表，取出当前列表中的最后一条记录</li> <li>在最后一条记录的基础上把次数加一,重新把次数和当前时间添加到列表的尾部</li> <li>把最新列表渲染到页面</li> <li>把最新列表再次存入本地</li></ol> <p><strong>自己的结果导向思维：</strong></p> <p><strong>1.1</strong> 渲染多条数据到页面上</p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">const</span> appDom <span class="token operator">=</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> HTMLDivElement<span class="token punctuation">)</span>
appDom<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'刷新次数为:10,刷新时间为12:12'</span>

<span class="token comment">// 因为原型图上面是显示的多条数据，肯定是一个数组的形式，类似于数组里面一个元素，就对应页面上一条数据</span>
<span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">]</span>
appDom<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> list<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>item <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token string">'刷新次数为:10,刷新时间为:12:12'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'&lt;br&gt;'</span><span class="token punctuation">)</span>
</code></pre></div><p><strong>1.2 更改list数组为动态内容，定义数组类型</strong></p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token comment">// 代码改造，因为刷新的次数和刷新的时间，都是动态的可以变的，所以我们的数组元素应该是一个个对象</span>
<span class="token comment">// 对象的结构类似 {count: 1,  time: '12:12:12'}</span>
<span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>count<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>  time<span class="token operator">:</span> <span class="token string">'12:12:12'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>count<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>  time<span class="token operator">:</span> <span class="token string">'12:12:12'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>count<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>  time<span class="token operator">:</span> <span class="token string">'12:12:12'</span><span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token comment">// 又因为是ts，定义的函数或者变量都需要有类型，所有定义一个数组类型，结合接口</span>
<span class="token keyword">interface</span> <span class="token class-name">Item</span> <span class="token punctuation">{</span>
  count<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
  time<span class="token operator">:</span> <span class="token builtin">string</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> list<span class="token operator">:</span> Item<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>count<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>  time<span class="token operator">:</span> <span class="token string">'12:12:12'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>count<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>  time<span class="token operator">:</span> <span class="token string">'12:12:12'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>count<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>  time<span class="token operator">:</span> <span class="token string">'12:12:12'</span><span class="token punctuation">}</span>
<span class="token punctuation">]</span>

appDom<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> list<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token operator">:</span>Item<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">刷新次数为:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,刷新时间为</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>time<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'&lt;br&gt;'</span><span class="token punctuation">)</span>
</code></pre></div><p><strong>1.3 开始准备真实的list数据，思考： 刷新数据还存在，数据放哪里？</strong></p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token comment">// 本地存储，涉及到localStorage的操作，一般会封装为两个函数，一个获取，一个设置。因为不能存对象的原因</span>
<span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token string">'ts-refresh'</span>
<span class="token keyword">function</span> <span class="token function">getList</span><span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> Item<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">'[]'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">setList</span><span class="token punctuation">(</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> list<span class="token operator">:</span> Item<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
  localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>1.4  封装思想--- 本地存储拿，操作显示完成以后，再存入到本地存储里面。核心操作，大家需要着重练习的点！！！</strong></p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">const</span> key <span class="token operator">=</span> <span class="token string">'ts-refresh'</span>
<span class="token keyword">function</span> <span class="token function">updateData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 获取数据 --- 将外面的假数据修改了拿过来</span>
  <span class="token keyword">const</span> list<span class="token operator">:</span> Item<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">getList</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>

  <span class="token comment">// list变量拿进来以后， 外面的渲染找不到list这个变量，所以要将外面的代码也拿进来</span>
  
  appDom<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> list<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token operator">:</span>Item<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">刷新次数为:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,刷新时间为</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>time<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'&lt;br&gt;'</span><span class="token punctuation">)</span>

  <span class="token comment">// 还需要将修改的数据，例如事件和次数，在保存到本地存储里面</span>
  <span class="token comment">// 要保存的数据，先写个假的，等下再写时间和次数</span>
  <span class="token function">setList</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>count<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> time<span class="token operator">:</span> <span class="token string">'12:12:12'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 每次页面刷新要执行的函数</span>
<span class="token function">updateData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><p><strong>1.5 在把之前setList里面的没有写完的次数，和时间功能补全，一定是先写大致框架，在写具体</strong></p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">function</span> <span class="token function">updateData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> list<span class="token operator">:</span> Item<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">getList</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>

  <span class="token comment">// 将最后一条数据获取到，在此基础之上进行操作，然后渲染并且保存</span>
  <span class="token comment">// 注意数据获取不到的时候，对应的类型</span>
  <span class="token keyword">const</span> lastItem<span class="token operator">:</span> Item <span class="token operator">|</span> <span class="token keyword">undefined</span> <span class="token operator">=</span> list<span class="token punctuation">[</span>list<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>
  list<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    count<span class="token operator">:</span> lastItem <span class="token operator">?</span> lastItem<span class="token punctuation">.</span>count <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    time<span class="token operator">:</span> <span class="token function">getFormatTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  appDom<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> list<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>item<span class="token operator">:</span>Item<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">刷新次数为:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,刷新时间为</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>time<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'&lt;br&gt;'</span><span class="token punctuation">)</span>

  <span class="token function">setList</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> list<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">//再封装一个自定义时间格式化的函数</span>
<span class="token keyword">function</span> <span class="token function">getFormatTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> _time <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> h <span class="token operator">=</span> _time<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> m <span class="token operator">=</span> _time<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> s <span class="token operator">=</span> _time<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>h<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>m<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>s<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
</code></pre></div><p><strong>1.6 代码写完，优化封装 -- 收工</strong></p> <div class="language- extra-class"><pre class="language-text"><code>1. 抽离封装思想
2. 时间函数优化
   `${h &gt; 10 ? h : '0' + h}:${m &gt; 10 ? m : '0' + m}:${s &gt; 10 ? s : '0' + s}`
3. 抽离公共代码到对应的问题，例如utils等
4. 业务逻辑优化，是否要将最新的刷新次数放在首位
	const lastItem: Item | undefined = list[0]
	list.unshift(...)
</code></pre></div><blockquote><p>参考代码</p></blockquote> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 先主线逻辑 后细节</span>

<span class="token keyword">function</span> <span class="token function">updateData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 1. 获取最新列表 取到最后一项</span>
  <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token function">getList</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> lastItem <span class="token operator">=</span> list<span class="token punctuation">[</span>list<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span>
  <span class="token comment">// 2. 在上一条记录的基础上count + 1 配合当前时间添加到列表的尾部</span>
  list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">count</span><span class="token operator">:</span> lastItem <span class="token operator">?</span> lastItem<span class="token punctuation">.</span>count <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token function">getFormatTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token comment">// 3. 最新列表渲染到页面</span>
  <span class="token function">render</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span>
  <span class="token comment">// 4. 最新列表存入本地</span>
  <span class="token function">setList</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

type Item <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">count</span><span class="token operator">:</span> number
  <span class="token literal-property property">time</span><span class="token operator">:</span> string
<span class="token punctuation">}</span>
<span class="token keyword">const</span> <span class="token constant">KEY</span> <span class="token operator">=</span> <span class="token string">'ts-key'</span>
<span class="token keyword">function</span> <span class="token function">getList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> Item<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>
  <span class="token comment">// TODO</span>
  <span class="token keyword">return</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token constant">KEY</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">'[]'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// console.log(getList())</span>

<span class="token keyword">function</span> <span class="token function">setList</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">list</span><span class="token operator">:</span> Item<span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// TODO</span>
  localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token constant">KEY</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// setList([{ count: 1, time: '10:10:10' }])</span>

<span class="token keyword">function</span> <span class="token function">getFormatTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// TODO</span>
  <span class="token keyword">const</span> _time <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> h <span class="token operator">=</span> _time<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> m <span class="token operator">=</span> _time<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> s <span class="token operator">=</span> _time<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>h<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>m<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>s<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>

<span class="token comment">// console.log(getFormatTime())</span>
<span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">list</span><span class="token operator">:</span> Item<span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// TODO</span>
  <span class="token comment">// 1. 把list中每个对象格式化成字符串</span>
  <span class="token keyword">const</span> strArr <span class="token operator">=</span> list<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">刷新次数为:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">,刷新时间为:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>time<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token comment">// 2. 调用dom api渲染到页面中</span>
  <span class="token keyword">const</span> app <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span> <span class="token keyword">as</span> HTMLDivElement
  app<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> strArr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'&lt;br&gt;'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token function">updateData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/rz_doc_92/assets/js/app.c37b6607.js" defer></script><script src="/rz_doc_92/assets/js/3.fe9c6282.js" defer></script><script src="/rz_doc_92/assets/js/2.c35adb5c.js" defer></script>
  </body>
</html>
